<template>
	<view class="scopeBox">
		<!-- 直接扫码 -->
		<view class="directScane" v-if="currentPage=='directScane'">
			<directScane 
				:taskId="directObj.taskId"
				:taskName="directObj.taskName"
				:itemId="directObj.itemId"
				:lineId="directObj.lineId"
				:pointId="directObj.pointId"
				:cardId="directObj.cardId"
				:cardName="directObj.cardName"
				:cardNo="directObj.cardNo"></directScane>
		</view>
		<view class="taskList" v-if="currentPage=='list'">
			<view style="width:100%;height:100%;display:flex;align-items: center;text-align: center;justify-content: center;" v-if="listData.length == 0">
				暂无数据~
			</view>
			<view v-for="(item, index) in listData" :key="index">
				<view v-if="item.pointNum>item.inspectedNum" class="taskItem" @click="toDetail(item.id,item.taskName,item.taskNo)">
					<view class="taskCode taskMain">
						<span style="display:inline-block;width:calc(100% - 160rpx)">
							{{item.taskName}}
							<span class="to">></span>
						</span>
						<view class="taskStatus">
							{{item.pointNum<=item.inspectedNum
								?'巡检完成'
								:item.inspectedNum>0
									?'巡检中'
									:'待巡检'}}
						</view>
					</view>
					<view class="taskCount">
						<view class="tcInfo">
							
							<view class="tcNum" style="color: rgba(20, 203, 159, 1);">{{item.pointNum - item.inspectedNum}}</view>
							<view class="tcLabel">待巡检</view>
						</view>
						<view class="gapLine"></view>
						<view class="tcInfo">
							
							<view class="tcNum">{{item.inspectedNum}}</view>
							<view class="tcLabel">已巡检</view>
						</view>
						<view class="gapLine"></view>
						<view class="tcInfo">
							<view class="tcNum">{{item.pointNum}}</view>
							<view class="tcLabel">总点位数</view>
						</view>
					</view>
					<view class="taskDate">
						<view class="timeLine"></view>
						<view class="tdInfo">
							<view class="tdLabel">开始时间</view>
							<view class="tdTime">{{returnFullTime(item.taskBegin,item.taskEnd,item.classTimePre) || '1997-08-01 12:00:00'}}</view>
						</view>
						<view class="tdInfo">
							<view class="tdLabel">结束时间</view>
							<view class="tdTime">{{(returnFullTime(item.taskBegin,item.taskEnd,item.classTimeEnd).split(' ')[0]+' ' + item.classTimeEnd)  || '1997-08-01 12:00:00'}}</view>
						</view>
					</view>
				</view>
			</view>
			
		</view>
		<!-- 任务详情 -->
		<view v-if="currentPage=='detail'" class="taskDetail">
			<view class="checkNav">
				<view @click="toggleHasNo('wait')" :class="detailNav=='wait'?'act':''">
					待巡检
				</view>
				<view @click="toggleHasNo('has')" :class="detailNav=='has'?'act':''">
					已巡检
				</view>
			</view>
			<view class="checkList">
				<view class="pathTitle">
					<view class="taskCode">{{detailTaskCode}}</view>
					<view class="taskName">{{detailTaskName}}</view>
				</view>
				<view v-if="detailNav =='wait'" style="height: calc(100% - 60px);overflow: auto;">
					<view class="waitPoint" v-for="(item,index) in detailData.filter(ii=>{return ii.itemStatus=='1'})"  :key="index">
						<view class="yuan"></view>{{item.itemName}}
						<navigator v-if="false" :url="'/pages/respectIng/respectIng?taskId='+item.taskId+'&itemId='+ item.id +'&lineId='+ item.lineId+'&pointId='+item.pointId ">
							<view class="toRe">去巡检</view>
						</navigator>
						<view class="speContent">
							<view class="speLabel">巡检内容:</view>
							<view>
								{{item.inspectContent.split(';').join(';<br/>')}}
							</view>
						</view>
						
					</view>
				</view>
				<view v-if="detailNav =='has'">
					<view class="waitPoint" v-for="(item,index) in detailData.filter(ii=>{return ii.itemStatus!='1'})"  :key="index">
						<view class="yuan act"></view>{{item.itemName}}
						<view style="float:right">
							{{idToName('username',item.updateBy)}}
						</view>
					</view>
				</view>
			</view>
			
			<view class="back" @click="backList()"> 
				返回
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:'taskmain',
		data() {
			return {
				userList:[],
				//直接扫出来的参数
				directObj:{
					taskId:'',
					itemId:'',
					lineId:'',
					pointId:'',
					cardId:'',
					cardName:'',
					cardNo:''
				},
				NFCAdapter:null,
				pathId:'',//路线Id
				pointerId:'',//点位Id
				listData:[],
				detailTaskCode:'',//当前点位的线路code
				detailTaskName:'',//当前点位的线路名称
				detailData:[],
				detailNav:'wait',//wait has
				currentPage:'list',//detail：详情  list：列表  directScane：直接扫出来的页面
			}
		},
		onHide() {
			console.log('退出main')
			this.closeNfc();
		},
		beforeDestroy() {
			console.log('销毁main0')
			this.closeNfc();
			
		},
		onUnload() {
			console.log('销毁main')
			this.closeNfc();
		},
		mounted:function(){
			this.getUserList();//获取人员列表
			this.closeNfc();
			// this.getOfCurrentTask('1779807421636308993');//油品东门测试
			// 开始识别卡片
			if(!this.NFCAdapter){
				console.log('没有初始化就进来')
				this.actionCheck();
			}
			let _this = this
			this.$http.get('/inspect/insTask/mTask').then(res=>{
				console.log('待办任务列表1',res)
				_this.listData = [];
				if(res.data.success){
					// 过滤出当前时间在任务开始时间和任务结束时间之间的数据
					_this.listData=res.data.result.filter(item=>{
						// let full = new Date();
						// let YYYY= full.getFullYear();
						// let MM = full.getMonth()+ 1;
						// let DD = full.getDate();
						// MM=MM<10?'0'+MM:MM;
						// DD=DD<10?'0'+DD:DD;
						// let DayOf = YYYY+'-'+MM+'-'+DD + ' 08:00:00';//当前日期,默认为当天8点
						
						// let full2 = new Date(new Date().getTime()+86400000);
						// let YYYY2= full2.getFullYear();
						// let MM2 = full2.getMonth()+ 1;
						// let DD2 = full2.getDate();
						// MM2=MM2<10?'0'+MM2:MM2;
						// DD2=DD2<10?'0'+DD2:DD2;
						// let DayOf2 = YYYY2+'-'+MM2+'-'+DD2 + ' 08:00:00';//次日日期，默认为次日8点
						
						// let realFullTimeStart = this.returnFullTime(DayOf,DayOf2,item.classTimePre);
						// let realFullTimeEnd = realFullTimeStart.split(' ')[0]+' '+item.classTimeEnd;
						
						// return (full.getTime() >= (new Date(realFullTimeStart)).getTime()
						// 	&& full.getTime() <= (new Date(realFullTimeEnd)).getTime()
						// )
						
						
						
						let time = new Date();
						let YY = time.getFullYear();
						let MM = time.getMonth() + 1<10?'0'+(time.getMonth() + 1):time.getMonth() + 1;
						let DD = time.getDate()<10?'0'+time.getDate():time.getDate();
						
						
						
						if( (new Date()).getTime()>=(new Date(item.taskBegin)).getTime() 
							&& (new Date()).getTime()<=(new Date(item.taskEnd)).getTime() 
						){
							return true;
						}else{
							return false;
						}
						// if(item.taskBegin.split(' ')[0] == YY+'-'+MM+'-'+DD){
						// 	return true;
						// }else{
						// 	return false;
						// }
					})
				}
			})
			
		},
		methods: {
			getUserList(){
				let _this = this;
				this.$http.get('/sys/user/list?pageNo=1&pageSize=9999').then((res)=>{
					_this.userList = res.data.result.records;
				})
			},
			idToName(key,value){
				// unusualId
				let cUser = this.userList.filter(item=>{
					return item[key]==value
				})
				if(cUser && cUser.length){
					return cUser[0].realname
				}else{
					return '未匹配人选'
				}
			},
			closeNfc(){
				if(this.NFCAdapter){
					console.log('开始清除')
					this.NFCAdapter.offDiscovered(this.discoverHandler)
					this.NFCAdapter.stopDiscovery()
					this.NFCAdapter = null
					console.log('清除结束')
				}
			},
			NFClistener(){
				let _this = this;
				this.NFCAdapter.startDiscovery({
				  success: () => {
				    _this.$tip.alert("请将设备放入识别区NFC")
				    // 监听 NFC 标签
				    _this.NFCAdapter.onDiscovered(this.discoverHandler)
				  },
				  fail: error => {
					  console.log('error',error)
					  if(error.errMsg=='startDiscovery:fail:NFC discovery already started'){
						  _this.NFCAdapter.onDiscovered(this.discoverHandler)
					  }
						// _this.$tip.alert("请重试")
				    console.error(error)
				  }
				})
			},
			getOfCurrentTask(pointId,cardId,cardName){
				let _this = this;
				this.$http.get('/inspect/insTask/mAllTask').then(res=>{
					if(res.data.success){
						let allTaskItem = res.data.result.reduce((p,n)=>{
							if(n.insTaskItemList && n.insTaskItemList.length){
								return [...p,...n.insTaskItemList.map(it=>{return {...it,taskBegin:n.taskBegin,taskEnd:n.taskEnd}})]
							}
							return p
						},[]).filter(item=>{//获取所有的任务项，过滤出来当前点位并且未巡检的任务项
							return item.pointId == pointId && item.itemStatus == '1'
						}).filter(item=>{//过滤出来在当前检查时间内的任务
							let full = new Date();
							// let YYYY= full.getFullYear();
							// let MM = full.getMonth()+ 1;
							// let DD = full.getDate();
							// MM=MM<10?'0'+MM:MM;
							// DD=DD<10?'0'+DD:DD;
							// let DayOf = YYYY+'-'+MM+'-'+DD + ' 08:00:00';//当前日期,默认为当天8点
							
							// let full2 = new Date(new Date().getTime()+86400000);
							// let YYYY2= full2.getFullYear();
							// let MM2 = full2.getMonth()+ 1;
							// let DD2 = full2.getDate();
							// MM2=MM2<10?'0'+MM2:MM2;
							// DD2=DD2<10?'0'+DD2:DD2;
							// let DayOf2 = YYYY2+'-'+MM2+'-'+DD2 + ' 08:00:00';//次日日期，默认为次日8点
							
							let realFullTimeStart = this.returnFullTime(item.taskBegin,item.taskEnd,item.classTimePre);
							let realFullTimeEnd = this.returnFullTime(item.taskBegin,item.taskEnd,item.classTimeEnd);
							
							return (full.getTime() >= (new Date(realFullTimeStart)).getTime()
								&& full.getTime() <= (new Date(realFullTimeEnd)).getTime()
							)
						})
						console.log('油品东门点位生效的任务：',allTaskItem)
						if(allTaskItem.length){
							_this.directObj.taskId = allTaskItem[0].taskId;
							_this.directObj.itemId = allTaskItem[0].id;
							_this.directObj.lineId = allTaskItem[0].lineId;
							_this.directObj.pointId = allTaskItem[0].pointId;
							_this.directObj.cardId = cardId;
							_this.directObj.cardName = cardName;
							_this.directObj.cardNo = _this.cardNo;
							_this.currentPage = 'directScane';
						}else{
							_this.$tip.toast('该点位当前时间暂无可执行的任务！');
						}
					}
					console.log('所有的任务列表：',res)
				})
			},
			getCardInfo(id){
				let _this = this;
				this.$http.get('/inspect/insPoint/queryByCardNo',{
					params:{cardNo:id || this.cardNo }
				}).then(res=>{
					if(res.data.success){
						var cardShowId = res.data.result.cardId;
						_this.getOfCurrentTask(res.data.result.id,cardShowId,res.data.result.cardName);
						// _this.cardId = res.data.result.cardId;
						// _this.cardName = res.data.result.cardName || res.data.result.cardNo || '异常';
						// let zindex=-1;
						// _this.pointList.forEach((ii,index)=>{
						// 	if(ii.label == res.data.result.pointName){
						// 		zindex = index
						// 	}
						// })
						// _this.pointIndex = zindex
						// _this.pointId = _this.pointList[zindex].value
						// console.log('回填：',_this.pointIndex)
					}
					
					console.log('卡的详细信息1',res)
				})
				
			},
			/**
			 * 监听回调
			 */
			discoverHandler(callback) {
				let _this = this;
			  console.log('==================== START ====================')
			  console.log('onDiscovered callback=>', callback)
			  let arr = [0x01, 0x01, 0x01, 0x01];
				let writeBuffer = new Uint8Array(arr);
				 let cId = this.changeType(callback.id)
				_this.cardNo = cId || ''
				// setTimeout(function(){
				// _this.actionPage = 'directScane';
				
				// },100)
				
				// 通过id获取对应的卡片信息以及卡片绑定的点位信息
				_this.getCardInfo(cId);
			},
			actionCheck(){
				// this.$tip.alert("请将设备放入识别区NFC")
				console.log(this.NFCAdapter);
				try{
					this.closeNfc();
				}catch(e){
					//TODO handle the exception
				}
				this.NFCAdapter = wx.getNFCAdapter();
				this.NFClistener();
			},
			changeType(buffer){
			 return Array.prototype.map.call(new Uint8Array(buffer),x => ('00'+x.toString(16)).slice(-2)).join('')
			},
			backList(){
				this.currentPage='list';
			},
			//返回区间内的全时间
			returnFullTime(start,end,currentTime){
				let starTime = new Date(start);
				let startYY= starTime.getFullYear();
				let startMM = starTime.getMonth()+ 1;
				let startDD = starTime.getDate();
				startMM=startMM<10?'0'+startMM:startMM;
				startDD=startDD<10?'0'+startDD:startDD;
				let resStart = startYY+'-'+startMM+'-'+startDD;
				let endTime = new Date(end);
				let endYY = endTime.getFullYear();
				let endMM =endTime.getMonth()+ 1;
				let endDD = endTime.getDate();
				endMM=endMM<10?'0'+endMM:endMM;
				endDD=endDD<10?'0'+endDD:endDD;
				let resEnd = endYY+'-'+endMM+'-'+endDD;
				if((new Date(resStart+' '+currentTime)).getTime()>=(new Date(start)).getTime()
					&& (new Date(resStart+' '+currentTime)).getTime()<= (new Date(end)).getTime()
				){
					return resStart+' '+currentTime
				}
				if( (new Date(resEnd+' '+currentTime)).getTime()>=(new Date(start)).getTime()
					&& (new Date(resEnd+' '+currentTime)).getTime()<=(new Date(end)).getTime()
				){
					 return resEnd+' '+currentTime
				}
			},
			toDetail(id,name,code){
				console.log(id)
				let _this = this;
				this.currentPage='detail';
				this.pathId = id;
				this.detailTaskName = name ||'--';
				this.detailTaskCode = code ||'--'
				this.$http.get('/inspect/insTask/mTaskItem',{params:{id:id}}).then(res=>{
					console.log('待办任务列表2',res)
					_this.detailData = [];
					if(res.data.success){
						_this.detailData=res.data.result
					}
				})
			},
			// 切换已巡检和带巡检
			toggleHasNo(to){
				this.detailNav = to
			}
		}
	}
</script>

<style scoped>
	.directScane{
		width: 100%;
		height: calc(100% - 300rpx);
		margin-top: 0;
		background-color: #fff;
		overflow: hidden;
	}
	.taskDetail {
		width: 100%;
		height: calc(100% - 0px);
		background-color: #fff;
		border-radius: 0px;
		box-shadow: 0px 0px 5px rgba(200,200,200,1);
		padding-bottom: 0;
		position: relative;
		background-color: rgba(245, 247, 249, 1);
	}
	.back{
		position: absolute;
		right: 12px;
		bottom: 12px;
		width: 40px;
		font-size: 14px;
		height: 40px;
		line-height: 40px;
		background: rgba(20, 203, 159, 1);
		color: #fff;
		text-align: center;
		border-radius: 50%;
	}
	.speContent{
		opacity: 0.65;
		display: flex;
		align-items: stretch;
		line-height: 20px;
	}
	.speLabel{
		width: 60px;
		text-align: right;
		flex-shrink: 0;
		
	}
	.speLabel+view{
		flex-grow: 1;
		padding: 0 12px;
		max-height: 100px;
		overflow: auto;
	}
	.taskMain{
		position: relative;
		padding-left:12px ;
		font-size: 15px;
		color: #333;
		font-weight: bold;
	}
	.taskMain .to{
		color: #C1C1C1;
		font-weight: normal;
		margin-left: 8px;
		transform: scaleX(0.6) scaleY(1.2);
		display: inline-block;
	}
	.taskMain::before{
		content: "";
		background-color: rgba(20, 203, 159, 1);
		height: 14px;
		width: 3px;
		position: absolute;
		left: 0;
		top: 7px;
	}
	.scopeBox{
		width: 100%;
		height: 100%;
		overflow: auto;
		padding: 0;
		padding-bottom: 40px;
	}
	.taskList{
		padding: 12px;
		height: 100%;
		overflow: auto;
	}
	.toRe{
		position: absolute;
		right: 4px;
		top:3px;
		line-height: 33px;
		font-size: 13px;
		color: rgba(20, 203, 159, 1);
		margin-right: 8px;
		opacity: 0.8;
	}
	.taskItem{
		display: flex;
		flex-direction: column;
		line-height: 28px;
		/* border-bottom: 1px solid #535353; */
		background: #fff;
		border-radius: 8px;
		margin-bottom: 28px;
		box-shadow: 0px 0px 8px rgba(200,200,200,1);
		padding: 8px 0;
	}
	.taskStatus{
		position: absolute;
		color: rgba(255,255,255,.82);
		font-size: 13px;
		border-radius: 4px;
		line-height: 33px;
		right:12px;
		top: 2px;
		background-color:rgba(242, 122, 55, 0.10);
		height: 20px;
		width: 45px;
		line-height: 20px;
		text-align: center;
		color: #F27A37;
		font-weight: normal;
	}
	.taskCount,.taskDate{
		display: flex;
		align-items: center;
		gap:12px;
	}
	.taskCount{
		padding: 12px;
		display: flex;
		justify-content: center;
	}
	.taskDate{
		flex-direction: column;
		line-height: 20px;
		align-items: flex-start;
		gap:4px;
		/* opacity: 0.8; */
		position: relative;
	}
	.taskDate .tdInfo{
		line-height: 16px;
	}
	.tdInfo,.tcInfo{
		display: flex;
		align-items: center;
	}
	.checkList{
		background-color: #fff;
		margin: 12px;
		height: calc(100% - 64px);
		border-radius: 8px;
		border-top: 1px solid transparent;
	}
	.tdInfo{
		background-color: rgba(243, 244, 249, 1);
		height: 32px;
		margin: auto;
		line-height: 32px;
		display: block;
		position: relative;
		width: calc(100% - 24px);
		margin: 0 12px;
		border-radius:4px;
	}
	.tcLabel{
		font-size: 14px;
		color: rgba(153, 153, 153, 1);
	}
	.tcNum{
		font-size: 18px;
		line-height: 29px;
		width: 100%;
		min-height: 29px;
		text-align: center;
		color: rgba(51, 51, 51, 1);
	}
	.gapLine{
		width: 1px;
		height: 32px;
		background-color:rgba(234, 234, 234, 1) ;
	}
	.tcInfo{
		flex-direction: column;
		text-align: center;
		width: 33%;
	}
	.checkNav{
		display: flex;
		overflow: hidden;
		color: rgba(153, 153, 153, 1);
		background-color: #fff;
		font-size: 12px;
		height: 44px;
		line-height: 44px;
	}
	.yuan{
		border: 1px solid rgba(0,0,0,.5);
		border-radius: 50%;
		width: 8px;
		height: 8px;
		display: inline-block;
		margin-right: 4px;
	}
	
	.checkNav .act{
		color: white;
		position: relative;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
	}
	.checkNav>view{
		width: 100%;
		line-height: 44px;
		text-align: center;
	}
	.checkNav .act::before{
		content: "";
		position: absolute;
		height: 2px;
		width: 50px;
		left: 50%;
		bottom: 0;
		transform: translateX(-50%);
		background-color: rgba(55, 135, 255, 1);
	}
	.pathTitle{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 12px;
		line-height: 40px;
		background-color:rgba(239, 245, 255, 1);
		border-radius: 6px;
		margin: 10px;
		border-top: 1px solid transparent;
		height: 40px;
		
		font-size: 14px;
	}
	.pathTitle .taskCode{
		margin-top: 0;
		background: transparent;
		font-size: 15px;
		color:rgba(20, 203, 159, 1);
		margin-bottom: 0;
	}
	.pathTitle .taskName{
		width: 55px;
		height: 28px;
		border-radius: 5px;
		color:rgba(20, 203, 159, 1);
		background-color: #fff;
		font-size: 12px;
		line-height: 28px;
		text-align: center;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.waitPoint{
		line-height: 32px;
		padding-left:14px;
		border-bottom: 1px solid rgba(200,200,200,.3);
		position: relative;
		padding-right: 40px;
		color: rgba(51, 51, 51, 1);
		font-size: 14px;
	}
	.tdLabel{
		font-size:14px ;
		color: rgba(51, 51, 51, 1);
		float: right;
		line-height: 32px;
		margin-right: 10px;
		font-weight: bold;
	}
	.tdTime{
		font-size: 14px;
		color: rgba(153, 153, 153, 1);
		line-height: 32px;
		margin-left: 32px;
	}
	.timeLine{
		position: absolute;
		top: 11px;
		bottom: 11px;
		width: 16px;
		left: 14px;
		background:url(../../static/timeLine.png) no-repeat;
		background-size: 100% 100%;
		z-index: 9;
	}
</style>
